<template>
  <app-dialog-form
      :title="'用户【'+username+'】连接列表'"
      width='1100px'
      :primary-btn="false"
      @open="handleDialogOpen"
      @closed="handleDialogClosed"

  >
    <el-table
        :data="list"
        stripe
        style="width: 100%"
    >
      <el-table-column type="index" width="60px" label="序号" align="center"/>
      <el-table-column align="center" prop="avatar" width="80px" label="头像">
        <template #default="{row}">
          <app-avatar :size="45" :src="row.avatar"/>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="160px" prop="nickName" label="昵称"/>
      <el-table-column align="center" width="90px" prop="conn" label="连接ID">
        <template #default="{row}">
          <el-tag effect="dark">{{ row.connId }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160px" prop="conn" label="客户端">
        <template #default="{row}">
          <el-tag type="info">{{ row.clientIp }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="260px" prop="conn" label="在线时间">
        <template #default="{row}">
          <el-tag type="info">{{ friendlyDate(row.time) }}</el-tag>
          <el-tag style="margin-left: 10px;">{{ formatDate(row.time) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="110px" label="操作">
        <template #header>
          <el-button @click="handleDialogOpen">
            <el-icon><refresh /></el-icon>
          </el-button>
        </template>
        <template #default="{row}">
          <el-button style="color: green" type="text" @click="kill(row.connId)">断开连接</el-button>
        </template>
      </el-table-column>
    </el-table>
  </app-dialog-form>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {IClientInfo} from "@/api/types/chat";
import {getUserList, killId} from "@/api/chat";
import {friendlyDate, formatDate} from "@/utils/constants";
import {ElMessage} from 'element-plus';

const list = ref<IClientInfo | any>()

const props = defineProps({
  username: {
    type: String,
    default: null,
  },
});

const kill = (id: number) => {
  killId(id).then((data) => {
    ElMessage.success(data.message)
    handleDialogOpen()
  })
}

const handleDialogOpen = async () => {
  if (props.username) {
    list.value = await getUserList(props.username)
  }
};

const handleDialogClosed = () => {
  list.value = []
};
</script>

<style scoped>

</style>
